<template>
    <view class="body">
        <view class="contain">
            <view class="usertTitle">
                <view class="user-avatar">
                    <u--image :showLoading="true" :src="src" width="120rpx" height="120rpx" :lazy-load="true" @click="click"
                        shape="circle"></u--image>
                </view>
                <view class="user-info">
                    <view class="company-name">广州亿付联网络科技有限公司</view>
                    <view class="institution-info">
                        <text class="institution-label">机构编号: 52</text>
                        <u-icon name="file-text" color="#fff" size="20" @click="copyInstitutionId"></u-icon>
                    </view>
                    <view class="phone-number">{{phone}}</view>
                </view>
            </view>
            <view class="justCotain">
                <view class="justCell" v-for="(item,index) in containList" :key="index"
                    @click="handleMenuClick(item, index)">
                    <u-row justify="space-between" gutter="11">
                        <u-col span="1">
                            <view class="">
                                <u--image :showLoading="true" :src="item.src" width="35rpx" height="35rpx" :lazy-load="true" @click="click"
                        shape="circle"></u--image>
                                <!-- <u-icon :name="item.icon" color="#427AF5" :size="item.size" style="width:50rpx"></u-icon> -->
                            </view>
                        </u-col>
                        <u-col span="9">
                            <view class="">{{item.text}}</view>
                        </u-col>
                        <u-col span="2">
                            <view v-if="item.showVersion" class="version-text">
                              {{item.version}}
                            </view>
                            <u-icon v-else-if="!item.isLogout" name="arrow-right" color="#999" size="18" style="width:30rpx;padding-left: 50rpx"></u-icon>
                        </u-col>
                    </u-row>
                </view>
            </view>
        </view>
        <view class="company">
            <companyMessage></companyMessage>
        </view>
    </view>
</template>


<script>
    import util from '@/common/utils.js'
    import companyMessage from '@/components/company-message.vue'
    export default {
        components: {
            companyMessage
        },
        data() {
            return {
                phone: '',
                userInfo: '',
                src: require('@/static/icon/p_042.png'),
                containList: [{
                        icon: 'list',
                        text: '我的信息',
                        size: '20',
                        src: require('@/static/newIcon/p_005.png'),
                        path: '/pages/user/myMsg'
                    },
                    {
                        icon: 'filled',
                        text: '修改收款账号',
                        size: '20',
                        src: require('@/static/newIcon/p_006.png'),
                        path: '/pages/user/modifyAccount'
                    },
                    {
                        icon: 'lock',
                        text: '修改登录密码',
                        size: '20',
                        src: require('@/static/newIcon/p_009.png'),
                        path: '/pages/user/editPwd'
                    },
                    {
                        icon: 'file-text',
                        text: '切换机构登录',
                        size: '20',
                        src: require('@/static/newIcon/p_007.png'),
                        path: '/pages/user/switchInstitution'
                    },
                    {
                        icon: 'grid',
                        text: '版本信息',
                        size: '20',
                        path: '',
                        src: require('@/static/newIcon/p_008.png'),
                        showVersion: true,
                        version: 'V2.1.0'
                    },
                    {
                        icon: 'file-text',
                        text: '法律条款',
                        size: '20',
                        src: require('@/static/newIcon/p_006.png'),
                        path: '/pages/user/protocol'
                    },
                    {
                        icon: 'power',
                        text: '注销账号',
                        size: '20',
                        src: require('@/static/newIcon/p_002.png'),
                        path: '/pages/user/deregister'
                    },
                    {
                        icon: 'logout',
                        text: '退出登录',
                        size: '20',
                        path: '',
                        src: require('@/static/newIcon/p_003.png'),
                        isLogout: true
                    }
                ]
            }
        },

        onLoad() {
            this.userInfo = util.getUserInfo()
            if (this.userInfo) {
                this.phone = (util.maskNumber(this.userInfo.phoneNo));
            }
        },
        onShow() {
            util.isLogin(1)
        },
        methods: {
            goPage(path, index) {
                uni.navigateTo({
                    url: path
                })
            },
            handleMenuClick(item, index) {
                if (item.isLogout) {
                    this.logOut()
                } else if (item.path) {
                    this.goPage(item.path, index)
                }
            },
            copyInstitutionId() {
                uni.setClipboardData({
                    data: '52',
                    success: () => {
                        uni.showToast({
                            title: '机构编号已复制',
                            icon: 'success'
                        })
                    }
                })
            },
            contactService() {
                uni.makePhoneCall({
                    phoneNumber: '400-123-4567'
                })
            },
            logOut() {
                uni.removeStorageSync('TOKEN_KEY')
                uni.navigateTo({
                    url: '/pages/login/login'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .body {

        .company {
            margin-top: 100rpx;
            width: 100%;
            padding-bottom: 100rpx;
        }

        .contain {
            background: linear-gradient(135deg, #427AF5 0%, #fff 100%);
            width: 100%;
            padding: 0;
           
        }

        .usertTitle {
            display: flex;
            align-items: center;
            padding: 88rpx 30rpx 5rpx 40rpx;
            .user-avatar {
                margin-right: 40rpx;
            }

            .user-info {
                flex: 1;
                color: #fff;

                .company-name {
                    font-size: 36rpx;
                    font-weight: bold;
                    line-height: 1.3;
                }

                .institution-info {
                    display: flex;
                    align-items: center;
                   

                    .institution-label {
                        font-size: 30rpx;
                        margin-right: 15rpx;
                    }
                }

                .phone-number {
                    font-size: 30rpx;
                    opacity: 0.9;
                }
            }
        }

        .justCotain {
            // box-shadow: -3px 5px 10px -4px #a9a9a9, 0px -1px 8px -3px #b2b2b2;
            background-color: #fff;
            margin-top: 70rpx;
            width:98%;
            padding-left:1.5%;

            .justCell {
                width: 97%;
                margin-left: 2%;
                height: 95rpx;
                line-height: 95rpx;
                color: #444;
                border-bottom: 1rpx solid #fcfcfc;
             
                .version-text {
                    color: #b2b2b2;
                    font-size: 28rpx;
                }
            }
        }

        .contact-service {
            margin: 40rpx 0;
            text-align: center;
        }

        .footer-info {
            text-align: center;
            padding: 20rpx 0 40rpx 0;

            .icp-info {
                display: block;
                font-size: 24rpx;
                color: #999;
                margin-bottom: 10rpx;
            }

            .copyright {
                display: block;
                font-size: 24rpx;
                color: #999;
            }
        }
    }
</style>